﻿@inject NavigationManager Nav
<!-- 文章卡片组件 -->
@functions {
    [Parameter] public Article Article { get; set; }

    private void NavigateToArticle()
    {
        Nav.NavigateTo($"/forum/article");
    }
}

<Card Hoverable Bordered="false"
      Style="border-radius: 8px; margin-bottom: 24px; cursor: pointer; transition: all 0.3s">
    <Button 
        Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"
        OnClick="NavigateToArticle" />

    <!-- 标题区域 -->
    <div class="card-header">
        <Text Strong>@Article.Title</Text>
        <Tag Color="@GetCategoryColor(Article.Category)">
            @Article.Category
        </Tag>
    </div>
    <!-- 元数据区域 -->
    <div class="card-footer">
        <div class="author-info">
            <Avatar Size="@("small")" Src="@GetAuthorAvatar(Article.AuthorId)" />
            <span>@GetAuthorName(Article.AuthorId)</span>
        </div>
        
    </div>
    <!--
        <div class="stats">
            <Icon Type="eye" /> @Random.Shared.Next(100, 999)
            <Icon Type="message" /> @Random.Shared.Next(10, 99)
            <Icon Type="star" Theme="IconThemeType.TwoTone" TwoToneColor="#FFD700" /> @Random.Shared.Next(5, 50)
        </div>
    -->
</Card>

<style>
.search-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    color: #999;
    font-size: 12px;
}

.author-info {
    display: flex;
    align-items: center;
}

.stats {
    display: flex;
    gap: 16px;
}

.stats .anticon {
    margin-right: 4px;
}
</style>

@code {
    private string GetCategoryColor(string category) => category switch
    {
        "技术" => "blue",
        "教程" => "orange",
        _ => "default"
    };

    private string GetAuthorName(int? authorId) => authorId switch
    {
        1001 => "张三",
        1002 => "李四",
        _ => "匿名"
    };

    private string GetAuthorAvatar(int? authorId) => authorId switch
    {
        1001 => "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
        1002 => "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
        _ => "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
    };
}